<template>
  <div class="flex flex-col h-full">
    <div class="flex items-center">
      <div
        v-for="(item, index) in activeData"
        :key="index"
        class="w-[120px] h-[80px] bg-slate-200 rounded-xl mr-3 flex justify-center items-center text-[18px] relative cursor-pointer"
        :class="item.id === itemActive ? 'active' : ''"
        @click="onClickActive(item)"
      >
        <div>{{ item.title }}</div>
        <div v-if="item.id === itemActive" class="active-icon absolute top-0 right-2"><CheckCircleOutlined /></div>
      </div>
      <!-- <div class="w-[120px] h-[80px] bg-slate-200 rounded-xl flex justify-center items-center text-[18px] cursor-pointer">特殊</div> -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { CheckCircleOutlined } from '@ant-design/icons-vue'

const emit = defineEmits(['update:open', 'success'])
const itemActive = ref('2')
const activeData = ref([
  { title: '限制', id: '2' },
  { title: '特殊', id: '3' }
])
const props = defineProps({
  userData: {
    type: Object,
    default: () => ({})
  }
})

const onClickActive = (item) => {
  if (itemActive.value === item.id) {
    itemActive.value = '1'
  } else {
    itemActive.value = item.id
  }
  emit('success', itemActive.value)
}

watchEffect(() => {
  itemActive.value = props.userData.useLevel
})
</script>
<style lang="less" scoped>
.active {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
</style>
